<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.box{
				width: 1000px;
				height: 375px;
				position: relative;
			}
			.box-img{
				position: absolute;
				top: 0;
				left: 0;
				/* display: none; */
				opacity: 0;
				/* 过渡 */
				transition: 1s;
			}
			.box-img:nth-child(1){
				opacity: 1;
			}
			.box-left{
				position: absolute;
				top: 50%;
				left: 0;
				width: 40px;
				height: 40px;
				margin-top: -20px;
				background-color: #ccc;
				color: #FFFFFF;
				border-radius: 0 5px 5px 0;
				text-align: center;
				line-height: 40px;
				font-size: 20px;
				z-index: 10;
			}
			.box-left:hover{
				background-color: #0C5460;
				color: #5F9EA0;
			}
			.box-right{
				position: absolute;
				top: 50%;
				right: 0;
				width: 40px;
				height: 40px;
				margin-top: -20px;
				background-color: #ccc;
				color: #FFFFFF;
				border-radius: 5px 0 0 5px;
				text-align: center;
				line-height: 40px;
				font-size: 20px;
				z-index: 10;
			}
			.box-right:hover{
				background-color: #0C5460;
				color: #5F9EA0;
			}
			.box-zhiding{
				position: absolute;
				right: 10px;
				bottom: 10px;
			}
			.box-zhiding>ul{
				padding: 0;
				margin: 0;
				list-style: none;
			}
			.box-zhiding>ul>li{
				width: 14px;
				height: 14px;
				border-radius: 50%;
				background-color: #ccc;
				z-index: 11;
				float: left;
				margin-right: 10px;
			}
			.box-zhiding>ul>li:hover{
				background-color: #0C5460;
			}
			.box-zhiding>ul>li:first-child{
				background-color: white;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="box-img"><img src="img/527f28ff20aa102b0463704b244db01f.jpg" width="1000" ></div>
			<div class="box-img"><img src="img/793eebbee1dd569fe56a8aaf58f62452.jpg" width="1000"></div>
			<div class="box-img"><img src="img/f22bf70c4dc00ab1ed9b3d71125534f7.jpg" width="1000"></div>
			<div class="box-left">&lt;</div>
			<div class="box-right">&gt;</div>
			<div class="box-zhiding">
				<ul>
					<li></li>
					<li></li>
					<li></li>
				</ul>
			</div>
		</div>
		
		
		
		
		<script src="js/轮播图.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>
